<template>
	<!-- 工作人员端鉴定详情 -->
	<view class="page">
		<view class="bg"></view>
		<view class="main">
			<view>
				<view class="main_son">
					<view class="top">
						<view class="top_l">
							<image class="logo" :src="vuex_imgUrl+order.avatar" mode=""></image>
							<view class="name">{{order.nickname}}</view>
						</view>
						<view class="top_r">
							<view class="date">{{$fn.parseTime(order.createTime)}}</view>
						</view>
					</view>
					<view class="top">
						<view class="top_l">
							<view class="text">鉴定编号：{{order.number}}</view>
						</view>
						<view class="top_r">
							<view class="sneakers" v-if="order.itemType==1">球鞋鉴定</view>
							<view class="sneakers" v-else-if="order.itemType==2">奢潮鉴定</view>
						</view>
					</view>
				</view>

				<view class="cause">
					备注内容：
					<view class="causetext">{{order.itemRemark}}</view>
				</view>
			</view>

			<view class="imgs">
				<u-swiper :list="list3" imgMode="scaleToFill" indicator indicatorMode="dot" height="654rpx"
					circular @click="enlarge"></u-swiper>
			</view>
		</view>
		<view class="capsule-box" v-if="order.identified == 0">
			<button class="btn1" @click="$fn.jumpPage(`/pages/appraiser/pages/transferOrder?param=${order.id}`)">转单</button>
			<button class="btn2" @click="$fn.jumpPage(`/pages/appraiser/pages/authenticate?param=${order.id}`)">立即鉴定</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "staffIdentDetails",
		data() {
			return {
				number:null,
				list3: [],
				order:{}
			};
		},
		onLoad(options) {
			console.log(options.param)
			this.number = options.param
			this.getOrderByNumber();
			
		},
		onShow() {},
		methods: {
			getOrderByNumber(){
				this.$api.getOrderByNumber({number:this.number}).then(res=>{
					console.log(res.data,"订单详情")
					this.order = res.data
					this.list3 =  JSON.parse(this.order.itemImage).map(data=>{
						data = this.vuex_imgUrl +data
						return data
					})
					
					console.log(this.list3)
					// this.list3 = this.order.itemImage
					
				})
			},
			// 放大图片
			enlarge(i) {
				console.log('点击了图片', i);
				uni.previewImage({
					urls: this.list3,
					current: i
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}

	.bg {
		width: 750rpx;
		height: 600rpx;
		background: linear-gradient(180deg, rgba(1, 255, 204, 0.5) 0%, rgba(1, 255, 204, 0) 100%);
	}

	.main {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: -576rpx auto 0;
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;

		.main_son {
			border-bottom: 1rpx solid #979999;
			padding: 32rpx 0 32rpx;
			display: flex;
			flex-direction: column;
			gap: 26rpx;
		}


		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top_l {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.text {
					font-size: 28rpx;
					color: #333333;
				}

				.logo {
					width: 72rpx;
					height: 72rpx;
					border-radius: 6rpx;
				}

				.name {
					font-weight: bold;
					font-size: 28rpx;
					color: #1A1A1A;
				}
			}

			.top_r {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				.sneakers {
					font-size: 24rpx;
					color: #01AF21;
				}

				.date {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

			}

		}


		.cause {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #979999;

			.causetext {
				font-weight: 400;
				color: #666666;
			}

		}

		.imgs {
			margin-top: 32rpx;
		}
	}

	.capsule-box {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 32rpx 68rpx;
		box-sizing: border-box;
		.btn1 {
			flex: 1;
			height: 96rpx;
			background: #01FFCC;
			border-radius: 16rpx 0rpx 0rpx 16rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;

		}

		.btn2 {
			flex: 1;
			height: 96rpx;
			background: #1A1A1A;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
</style>